<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<c:set var="title" value="酒店详情" scope="request" />
<jsp:include page="/head.jsp" />
</head>
<body>
	<c:import url="/news-class.do?mb=header" />
	<!-- 路径导航栏 -->
	<ol class="breadcrumb">
		<li><a href="#">七八网</a></li>
		<li><a href="/hotel.html">酒店预订</a></li>
		<li class="active">房间预订</li>
	</ol>

	<div class="hotel-info-body">

		<!--导航条 -->
		<div class="info-1 info-body">
			<ul class="nav nav-pills nav-justified"
				style="background-color: white;">
				<li role="presentation" class="active"><a>预定信息</a></li>
			</ul>
		</div>
		<!-- 滚动菜单js控制 -->
		<script>
			window.onload = function() {
				var list = document.querySelectorAll(".info-1>ul>li");
				for (var i = 0; i < list.length; i++) {
					let id = ("maue" + (i + 1));
					list[i].onclick = function() {
						maueActive(list, id);
						document.getElementById(id).scrollIntoView();
					}
				}
			}
			function maueActive(a, i) {
				if (i == 'maue1') {
					a[0].setAttribute('class', 'active');
					a[1].removeAttribute('class');
					a[2].removeAttribute('class');
				}
				if (i == 'maue2') {
					a[1].setAttribute('class', 'active');
					a[0].removeAttribute('class');
					a[2].removeAttribute('class');
				}
				if (i == 'maue3') {
					a[2].setAttribute('class', 'active');
					a[1].removeAttribute('class');
					a[0].removeAttribute('class');
				}
			}
			function updateNav() {
				var list = document.querySelectorAll(".info-1>ul>li");
				var scop = document.documentElement.scrollTop;
				let list1 = document.querySelectorAll(".panel-heading>h3");
				let h1 = list1[0].offsetTop;
				let h2 = list1[1].offsetTop;
				let h3 = list1[2].offsetTop;
				if (scop > 150) {
					document.getElementsByClassName('info-1')[0].setAttribute(
							'style', 'position: absolute; top:' + (scop - 147)
									+ 'px;');
					if (scop > h1 && scop < h2) {
						maueActive(list, 'maue1');
					} else if (scop > h2 && scop < h3) {
						maueActive(list, 'maue2');
					} else if (scop > h3) {
						maueActive(list, 'maue3');
					}
				} else if (scop <= 150) {
					document.getElementsByClassName('info-1')[0]
							.removeAttribute('style');
				}
			}
			window.addEventListener('scroll', updateNav);
		</script>
		<!--预定信息  -->
		<div class="info-2 info-body">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 id="maue1" class="panel-title">预定信息</h3>
				</div>
				<div class="panel-body">
					<div class="input-group">
						<div id="main" style="text-align: center; margin-left: 320px;">
							<form
								action="hotel-reserve.html" method="post">
								<input value="${typeId }" name="typeId" style="display: none;" />
								<input value="${shopId }" name="shopId" style="display: none;" />
								<input value="${roomprice.roomPlatformPrice  }" name="money"
									style="display: none;" />
								<table
									style="text-align: left; padding-left: 20px; font-size: 16px">
									<tr height="30px">
										<td width="400px">入住人</td>
										<td style="padding-left: 2px;" width="400px">${sessionScope.user.userRealName }</td>
									</tr>
									<tr height="30px">
										<td>房间类型</td>
										<td style="padding-left: 2px;">${roomTypeName }</td>
									</tr>
									<tr height="30px">
										<td>入住时间</td>
										<td><input type="date" style="width: 9.5em; border:0;"
											name="orderStartTime" required="required"  /></td>
									</tr>
									<tr height="30px">
										<td>离店时间</td>
										<td><input type="date" style="width: 9.5em; border:0;"
											name="orderEndTime" required="required" /></td>
									</tr>
									<tr height="30px">
										<td>房间价格</td>
										<td style="padding-left: 2px;">${roomprice.roomPlatformPrice }/天&nbsp;&nbsp;<del>${roomprice.roomMarketPrice }/天</del></td>
									</tr>
									<tr height="30px">
										<td><button type="submit" class="btn btn-default">提交</button></td>
										<td><a href="javascript:history.go(-1)"
											class="btn btn-default">返回</a></td>
									</tr>
								</table>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<jsp:include page="/footer.jsp" />
</body>
</html>
